<template>
    <div class="county">
        <h3 class="title">{{title}}</h3>
        <ul class="bar">
            <li v-for="(item,index) of rainInfo" :key="index">
                <div :id="'rainFall'+item.county">
                    <span class="val">{{item.value}}</span>
                    <span class="countyName" v-show="item.county!=='市区'">{{item.county}}</span>
                    <span style="display:inline-block;" class="countyName" v-show="item.county=='市区'">
                        <span style="display:inline-block;margin-bottom:1.2rem;">市</span>
                        <span>区</span>
                    </span>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    props:['pageType'],
    watch:{
        pageType(newval){
            alert(newval)
           if(newval=='tem-city'){
               this.title = '各区县实况温度|℃'
           }else if(newval=='rain-city'){
               this.title = '各区县24小时累计降雨|mm'
           }
        }
    },
    data(){
        return{
            title:'',
            rainInfo:[
                {
                    county:'市区',
                    value:23
                },{
                    county:'乐青市',
                    value:19
                },{
                    county:'永嘉县',
                    value:18
                },{
                    county:'洞头区',
                    value:22
                },{
                    county:'瑞安市',
                    value:18
                },{
                    county:'平阳县',
                    value:24
                },{
                    county:'文成县',
                    value:27
                },{
                    county:'泰顺县',
                    value:22
                },{
                    county:'苍南县',
                    value:23
                },{
                    county:'龙岗市',
                    value:23
                },
            ]
        }
    },
    methods:{
        getMax(){//筛选最大值
            let arr = []
            for(let i=0;i<this.rainInfo.length; i++){
                arr.push(this.rainInfo[i].value)
            }
            return Math.max.apply(null, arr)
        },
        renderBar(){
            let max = this.getMax()
            for(let i=0;i<this.rainInfo.length; i++){
                let countyId = document.getElementById('rainFall'+this.rainInfo[i].county)
                countyId.style.height = (this.rainInfo[i].value/max * 12)+'rem'
            }
        }
    },
    created(){
        if(this.pageType=='tem-city'){
            this.title = '各区县实况温度|℃'
        }else if(this.pageType=='rain-city'){
            this.title = '各区县24小时累计降雨|mm'
            for(let i=0; i<this.rainInfo.length;i++){
                this.rainInfo[i].value = this.rainInfo[i].value - 10
            }
        }
    },
    mounted(){
        this.renderBar()
    },
}
</script>

<style lang="scss" scoped>
    .county{
        width:100%;
        height:100%;
        // background-color: #040F40;
        .title{
            height:2.3rem;
            width:98%;
            line-height:2.3rem;
            letter-spacing: .2rem;
            font-size:1.2rem;
            padding-left:1rem;
            box-sizing: border-box;
            border:.1rem solid rgba(48, 138, 199, 0.5);
            box-shadow: 0rem 0rem .5rem .1rem rgba(48, 138, 199, 0.5) inset;
        }
        .bar{
            width:100%;
            margin-top:3.4rem;
            height:12rem;
            border-bottom:.1rem solid #0F6490;
            display:flex;
            li{
                margin-top:12rem;
                transform: rotate(180deg);
                transform-origin:center top;
                flex:1;
                div{
                    background: linear-gradient(to top, rgba(17, 197, 221, 0.8) 10%,rgba(112, 11, 243, 0.5) 65%,rgba(218, 207, 233, 0) 100%);
                    border-bottom:.2rem solid #4DEFB6;
                    position: relative;
                    .val{
                        position:absolute;
                        bottom:-1.5rem;
                        right:50%;
                        transform: translate(50%,0) rotate(180deg);
                        color:#fff;
                    }
                    .countyName{
                        display:inline-block;
                        height:3rem;
                        line-height:1.2rem;
                        position:absolute;
                        right:50%;
                        transform: translate(50%,-135%) rotate(180deg);
                    }
                }
                
            }
        }
    }
</style>